<template>
	<div class="page_account" id="account_login">
		<!-- 背景遮罩 -->
		<div class="login_overlay" @click="closeModal"></div>
		
		<!-- 登录模态框 -->
		<div class="login_modal">
			<div class="login_container">
				<!-- 左侧功能展示区 -->
				<div class="left_sidebar">
					<div class="sidebar_header">
						<div class="logo_area">
							<img src="/img/qrcode_img.png" alt="Logo" class="logo_img" />
						<div class="logo_text">
							<div class="logo_title">{{ t('systemName') }}</div>
							<div class="logo_subtitle">{{ t('systemSubtitle') }}</div>
							<div class="logo_english">Academic Conference System</div>
						</div>
						</div>
					</div>
					<div class="sidebar_content">
						<div class="feature_list">
							<div class="feature_item" v-for="(feature, index) in features" :key="index">
								<i class="el-icon-check feature_icon"></i>
								<span class="feature_text">{{ t(feature) }}</span>
							</div>
						</div>
					</div>
				</div>
				
				<!-- 右侧登录表单区 -->
				<div class="right_content">
					<div class="content_header">
						<h2 class="page_title">{{ t('login') }}</h2>
						<i class="el-icon-close close_btn" @click="closeModal"></i>
					</div>
					
					<!-- 登录方式切换 -->
					<div class="login_tabs">
						<div class="tab_item" :class="{ active: loginType === 'account' }" @click="loginType = 'account'">
							{{ t('accountLogin') }}
						</div>
						<div class="tab_item" :class="{ active: loginType === 'phone' }" @click="loginType = 'phone'">
							{{ t('phoneQuickLogin') }}
						</div>
					</div>
					
					<!-- 登录表单 -->
					<div class="login_form">
						<b-form>
							<!-- 账号登录 -->
							<template v-if="loginType === 'account'">
								<b-form-group :id="'input-group-username'" :label="t('account')" :label-for="'input-username'">
									<b-form-input id="input-username" v-model="form.username" type="text" 
										:placeholder="t('enterPhoneOrEmail')" trim></b-form-input>
								</b-form-group>
								
								<b-form-group :id="'input-group-password'" :label="t('password')" :label-for="'input-password'">
									<b-form-input id="input-password" v-model="form.password" type="password" 
										:placeholder="t('enterPassword')" class="password_input" trim autocomplete="off"></b-form-input>
									<i class="el-icon-view password_toggle" @click="togglePasswordVisibility"></i>
								</b-form-group>
							</template>
							
							<!-- 手机快捷登录 -->
							<template v-if="loginType === 'phone'">
								<b-form-group :id="'input-group-phone'" :label="t('phoneNumber')" :label-for="'input-phone'">
									<div class="phone_input_group">
										<b-form-select id="country_code" v-model="countryCode" class="country_code_select">
											<b-form-select-option value="+86">中国 +86</b-form-select-option>
											<b-form-select-option value="+1">美国 +1</b-form-select-option>
											<b-form-select-option value="+44">英国 +44</b-form-select-option>
										</b-form-select>
										<b-form-input id="input-phone" v-model="phoneLogin.phone" type="text" 
											:placeholder="t('enterPhoneNumber')" class="phone_input" trim></b-form-input>
									</div>
								</b-form-group>
								
								<b-form-group :id="'input-group-sms'" :label="t('verificationCode')" :label-for="'input-sms'">
									<div class="sms_input_group">
										<b-form-input id="input-sms" v-model="phoneLogin.smsCode" type="text" 
											:placeholder="t('enterVerificationCode')" class="sms_input" trim></b-form-input>
										<el-button type="success" class="get_sms_btn" @click="getSmsCode">{{ t('getSmsCode') }}</el-button>
									</div>
								</b-form-group>
							</template>
							
							<!-- 海外手机登录链接 -->
							<div class="overseas_login_link" v-if="loginType === 'account'">
								<router-link to="#" class="link_text">{{ t('overseasPhoneLogin') }}</router-link>
							</div>
							
							<!-- 登录按钮 -->
							<div class="submit_btn_wrap">
								<el-button type="primary" class="submit_btn" @click.stop.prevent="submit()">{{ t('login') }}</el-button>
							</div>
							
							<!-- 操作链接 -->
							<div class="action_links">
								<div class="register_link">
									<span>{{ t('noAccount') }}? </span>
									<router-link to="/account/register" class="link_text register_link_text">{{ t('registerNow') }} ></router-link>
								</div>
								<div class="forgot_link">
									<router-link to="/account/forgot" class="link_text">{{ t('forgotPassword') }}?</router-link>
								</div>
							</div>
						</b-form>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import SlidePicture from "@/components/common/slidePicture";
	import mixin from "@/mixins/page.js";
	import mixin_i18n from "@/mixins/i18n.js";
	
	export default {
		mixins: [mixin, mixin_i18n],
		data() {
			return {
				loginType: 'account', // 'account' 或 'phone'
				countryCode: '+86',
				showPassword: false,
				features: [
					'academicConference',
					'articleManagement',
					'announcementNews',
					'conferenceRegistration',
					'callForPapersTopics',
					'contactUs',
					'collectionManagement'
				],
				form: {
					username: "",
					password: "",
				},
				phoneLogin: {
					phone: "",
					smsCode: ""
				},
				isGeeFinish: false,
			};
		},
		methods: {
			closeModal() {
				this.$router.push('/');
			},
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword;
				const input = document.getElementById('input-password');
				if (input) {
					input.type = this.showPassword ? 'text' : 'password';
				}
			},
			getSmsCode() {
				if (!this.phoneLogin.phone) {
					this.$message.warning(this.t('enterPhoneNumber'));
					return;
				}
				// 发送短信验证码
				this.$post("~/api/user/send_sms?", { phone: this.phoneLogin.phone }, (res) => {
					if (res.result) {
						this.$message.success(this.t('verificationCodeSent'));
					} else if (res.error) {
						this.$message.error(res.error.message || '发送失败，请重试');
					}
				});
			},
			slidePictureState(state) {
				if (state === true) {
					this.$message.success(this.t('verificationSuccess'));
					this.isGeeFinish = true;
				} else {
					this.isGeeFinish = false;
				}
			},
			submit() {
				var _this = this;
				
				if (this.loginType === 'account') {
					if (!this.validation_username) {
						return this.$message.warning(this.t('enterCorrectAccount'));
					}
					if (!this.validation_password) {
						return this.$message.warning(this.t('enterCorrectPassword'));
					}
					
					var form = Object.assign({}, this.form);
					this.$post("~/api/user/login?", form, (res) => {
						if (res.result && res.result.obj) {
							var obj = res.result.obj;
							$.db.set("token", obj.token);
							_this.$store.commit("user_set", obj);
							this.$get_auth(obj.user_group, () => {
								this.$router.push("/");
								location.reload();
							});
							this.$message.success(this.t('loginSuccess'));
						} else if (res.error) {
							console.log(res.error);
							this.$message.error(res.error.message);
						}
					});
				} else if (this.loginType === 'phone') {
					if (!this.phoneLogin.phone) {
						return this.$message.warning(this.t('enterPhoneNumber'));
					}
					if (!this.phoneLogin.smsCode) {
						return this.$message.warning(this.t('enterVerificationCode'));
					}
					// 手机快捷登录
					var form = {
						phone: this.phoneLogin.phone,
						sms_code: this.phoneLogin.smsCode
					};
					this.$post("~/api/user/phone_login?", form, (res) => {
						if (res.result && res.result.obj) {
							var obj = res.result.obj;
							$.db.set("token", obj.token);
							_this.$store.commit("user_set", obj);
							this.$get_auth(obj.user_group, () => {
								this.$router.push("/");
								location.reload();
							});
							this.$message.success(this.t('loginSuccess'));
						} else if (res.error) {
							console.log(res.error);
							this.$message.error(res.error.message);
						}
					});
				}
			},
		},
		computed: {
			validation_username() {
				var length = this.form.username.length;
				if (!length) {
					return null;
				}
				return length > 4 && length < 17;
			},
			validation_password() {
				var length = this.form.password.length;
				if (!length) {
					return null;
				}
				return length > 4 && length < 17;
			},
		},
		components: {
			SlidePicture,
		}
	};
</script>

<style scoped>
.page_account {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

.login_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.login_modal {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 1000px;
	max-height: 90vh;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.login_container {
	display: flex;
	min-height: 600px;
	max-height: 80vh;
	overflow: hidden;
}

/* 左侧功能展示区 */
.left_sidebar {
	width: 40%;
	background: linear-gradient(180deg, #4A90E2 0%, #357ABD 100%);
	display: flex;
	flex-direction: column;
	padding: 40px;
	color: #fff;
	overflow-y: auto;
}

.sidebar_header {
	margin-bottom: 40px;
}

.logo_area {
	display: flex;
	align-items: center;
}

.logo_img {
	width: 50px;
	height: 50px;
	margin-right: 15px;
	border-radius: 8px;
}

.logo_text {
	flex: 1;
}

.logo_title {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 6px;
}

.logo_subtitle {
	font-size: 14px;
	opacity: 0.9;
	margin-bottom: 4px;
}

.logo_english {
	font-size: 12px;
	opacity: 0.8;
}

.sidebar_content {
	flex: 1;
}

.feature_list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.feature_item {
	display: flex;
	align-items: center;
	font-size: 14px;
}

.feature_icon {
	margin-right: 10px;
	font-size: 16px;
	color: #87CEEB;
}

.feature_text {
	flex: 1;
}

/* 右侧登录表单区 */
.right_content {
	width: 60%;
	background: #fff;
	padding: 40px 50px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.content_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
	position: relative;
}

.page_title {
	font-size: 28px;
	font-weight: bold;
	color: #333;
	margin: 0;
	text-align: center;
	width: 100%;
}

.close_btn {
	font-size: 24px;
	cursor: pointer;
	color: #999;
	position: absolute;
	right: 0;
	top: 0;
	transition: color 0.3s;
}

.close_btn:hover {
	color: #333;
}

.login_tabs {
	display: flex;
	margin-bottom: 30px;
	border-bottom: 2px solid #f0f0f0;
	justify-content: center;
}

.tab_item {
	padding: 10px 20px;
	cursor: pointer;
	color: #999;
	font-size: 15px;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: all 0.3s;
}

.tab_item:hover {
	color: #4A90E2;
}

.tab_item.active {
	color: #E6A23C;
	border-bottom-color: #E6A23C;
	font-weight: bold;
}

.login_form {
	flex: 1;
}

.password_input {
	position: relative;
}

.password_toggle {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #999;
	z-index: 10;
}

.password_toggle:hover {
	color: #333;
}

.phone_input_group {
	display: flex;
	gap: 10px;
}

.country_code_select {
	width: 130px;
	flex-shrink: 0;
}

.phone_input {
	flex: 1;
}

.sms_input_group {
	display: flex;
	gap: 10px;
}

.sms_input {
	flex: 1;
}

.get_sms_btn {
	flex-shrink: 0;
}

.overseas_login_link {
	margin: 15px 0;
}

.link_text {
	color: #4A90E2;
	text-decoration: none;
	cursor: pointer;
	font-size: 14px;
}

.link_text:hover {
	text-decoration: underline;
}

.submit_btn_wrap {
	margin: 30px 0;
}

.submit_btn {
	width: 100%;
	height: 44px;
	font-size: 16px;
}

.action_links {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 15px;
}

.register_link {
	flex: 1;
}

.register_link_text {
	color: #E6A23C;
	font-weight: bold;
}

.forgot_link {
	text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
	.login_modal {
		width: 95%;
		max-width: none;
	}
	
	.login_container {
		flex-direction: column;
		min-height: auto;
	}
	
	.left_sidebar {
		width: 100%;
		min-height: 200px;
		padding: 30px 20px;
	}
	
	.right_content {
		width: 100%;
		padding: 30px 20px;
	}
}
</style>
